<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta userName="format-detection" content="telephone = no"/>
    <title>demo</title>
    <link rel="stylesheet" href="style/resetPhone.css">
    <link rel="stylesheet" href="style/font-awesome.min.css">
    <link rel="stylesheet" href="style/animateA.css">
    <link rel="stylesheet" href="style/vrvContacts.css">
    <link rel="stylesheet" href="style/mui.min.css">
    <link rel="stylesheet" href="style/phone.css">
    <link rel="stylesheet" href="style/calendar.css">

    <script src="js/vrv-jssdk.js"></script>
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/jquery.charfirst.pinyin.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vueX.js"></script>
    <script src="js/vue-router.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div class="app" v-cloak>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <router-view></router-view>
    </transition>
    <transition-group enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <vrv-contacts :key="1" v-if="showFlag.contacts"></vrv-contacts>
    </transition-group>
</div>
</body>
<template id="index">
    <div class="fragments">
        <header class="headerY">
            <div class="back-icon"></div>
            <div class="close-window">关闭</div>
            首页
            <div class="header-confirm c-confirm">
                确定
            </div>
        </header>
        <div class="containerY" style="overflow-y: auto">
            <ul class="cells-wrap">
                <li class="cells-wrap-li flex flex-r flex-align-center">
                    <label>标题</label>
                    <div class="cell-div mui-ellipsis">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
                </li>
                <li class="cells-wrap-li flex flex-r flex-align-center">
                    <label>标题</label>
                    <div class="cell-div">测试</div>
                </li>
                <li class="cells-wrap-li flex flex-r flex-align-center cells-wrap-li-icon">
                    <label>通讯录</label>
                    <div class="cell-div">张三</div>
                    <div class="cell-icon cell-url" @click="go_page"></div>
                </li>
            </ul>
            <div>
                <div class="cells-title">标题标题</div>
                <ul class="cells-wrap" style="margin-top: 0">
                    <li class="cells-wrap-li flex flex-r flex-align-center">
                        <label>标题</label>
                        <input type="text" placeholder="输入框">
                    </li>
                    <li class="cells-wrap-li flex flex-r cells-wrap-li-txt">
                        <label>标题</label>
                        <div class="cell-div cell-div-txtArea" contenteditable="true">
                            内容框
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<template id="contacts">
    <div class="fragments">
        <header class="headerY">
            <div class="back-icon" @click="back_page"></div>
            <div class="close-window" onclick="closeWindow()">关闭</div>
            {{head}}
            <div class="header-confirm c-confirm" @click="send_contacts_selected">
                确定
            </div>
        </header>
        <div class="containerY">
            <div class="switch-contacts-wrap flex flex-align-center flex-pack-center"
                 v-if="vrv_contacts_switch != 3">
                <div class="switcher-wrap">
                    <div class="switch-to-contacts flex flex-align-center flex-pack-center"
                         @click.stop="vrv_contacts_switch = 1"
                         :class="vrv_contacts_switch == 1?'switcher-wrap-active':''">
                        联系人
                    </div>
                    <div class="switch-to-structure flex flex-align-center flex-pack-center"
                         @click.stop="vrv_contacts_switch = 2"
                         :class="vrv_contacts_switch == 2?'switcher-wrap-active':''">
                        组织架构
                    </div>
                </div>
            </div>
            <div class="search-wrap search-icon flex flex-align-center flex-pack-center"
                 v-if="vrv_contacts_switch == 1 || vrv_contacts_switch == 3">
                <div class="search-div">
                    <input type="text" class="" placeholder="搜索" v-model="keywords">
                </div>
            </div>
            <div v-if="vrv_contacts_switch == 1" class="vrv-contacts-h">
                <div class="vrv-contacts-firstLetter"
                     v-show="keywords==''">
                    <a class="font-black" name="☆">
                        <!--☆-->
                    </a>
                </div>
                <ul v-show="keywords==''">
                    <li class="vrv-contacts-list" @click="go_group">
                        <img src="img/qun.png">
                        <div class="vrv-contacts-userName" id="c☆">
                            群组
                        </div>
                    </li>
                </ul>
                <div class="vrv-contacts-wrap" v-if="$store.state.contacts != ''" v-for="item in $store.state.contacts">
                    <div class="vrv-contacts-firstLetter"
                         v-show="keywords==''">
                        <a :id="'c'+item.letter"
                           class="font-black">
                            {{item.letter}}
                        </a>
                    </div>
                    <ul :class="keywords==''?'vrv-contacts-wrap-ul':''">
                        <li class="vrv-contacts-list"
                            v-for="list in keywords_search(item.data,keywords)">
                            <img v-if="list.userPhotoUrl" :src="list.userPhotoUrl" onerror="notFind()">
                            <img v-else src="img/q.png">
                            <div class="vrv-contacts-userName">
                                {{list.userName}}
                            </div>
                            <input type="checkbox" class="vrv-check"
                                   :value="list.userID" v-model="contactsChecked" @click="contacts_select(list)">
                            <span class="v-unCheck" id="list.userID"></span>
                        </li>
                    </ul>
                </div>
                <div v-if="$store.state.contacts == ''" class="none-list">
                    <i class="fa fa-file-text f-color-gray" aria-hidden="true"></i>
                    <div>
                        您未添加好友
                    </div>
                </div>
            </div>
            <div class="vrv-organizational-structure" v-if="vrv_contacts_switch == 2 && $store.state.structureTitle[0].orgName != ''">
                <ul class="structure-title">
                    <li class="structure-title-list">
                        <div v-for="(title,index) in $store.state.structureTitle"
                             @click="structure_item_title(title,index)">
                            <img src="img/sanjiao1.png" class="s-title-s" v-if="index == 0">
                            {{title.orgName}}
                        </div>
                    </li>
                </ul>
                <ul class="vrv-contacts-wrap vrv-structure-h">
                    <li class="vrv-contacts-list"
                        v-if="$store.getters.structureListLength > 0"
                        v-for="item in $store.state.structureList"
                        @click="structure_check(item)">
                        <img src="img/f.png">
                        <div class="vrv-contacts-userName">
                            {{item.userName}}
                        </div>
                    </li>
                    <li class="vrv-contacts-list"
                        v-if="$store.getters.staffListLength > 0"
                        v-for="list in $store.state.staffList">
                        <img v-if="list.photoUrl" :src="list.photoUrl" onerror="notFind()">
                        <img v-else src="img/q.png">
                        <div class="vrv-contacts-userName">
                            {{list.userName}}
                        </div>
                        <input type="checkbox" class="vrv-check" :value="list.userID" v-model="contactsChecked"
                               @click="contacts_select(list)">
                        <span class="v-unCheck"></span>
                    </li>
                </ul>
            </div>
            <div v-if="vrv_contacts_switch == 2 && $store.state.structureTitle[0].orgName == ''" class="none-list">
                <i class="fa fa-file-text f-color-gray" aria-hidden="true"></i>
                <div>
                    您未加入组织
                </div>
            </div>
            <div class="vrv-group-list" v-if="vrv_contacts_switch == 3">
                <ul v-if="$store.getters.groupListLength > 0">
                    <li class="vrv-contacts-list"
                        v-for="list in keywords_search($store.state.groupList,keywords)">
                        <img v-if="list.photoUrl" :src="list.photoUrl">
                        <img v-else src="img/qun.png">
                        <div class="vrv-contacts-userName">
                            {{list.userName}}
                        </div>
                        <input type="checkbox" class="vrv-check"
                               :value="list.userID" v-model="groupChecked" @click="group_select(list)">
                        <span class="v-unCheck"></span>
                    </li>
                </ul>
                <div v-else="$store.state.contacts == ''" class="none-list">
                    <i class="fa fa-file-text f-color-gray" aria-hidden="true"></i>
                    <div>
                        您未加入群
                    </div>
                </div>
            </div>
        </div>
        <div class="letter-index-wrap flex flex-align-center" v-if="vrv_contacts_switch == 1">
            <ul class="letter-index-ul">
                <li class="letter-index-li" @click="index_to_letter('☆')">
                    <i class="fa fa-star-o"></i>
                </li>
                <li class="letter-index-li"
                    v-for="item in $store.state.contacts"
                    @click="index_to_letter(item.letter)">
                <span>
                    {{item.letter}}
                </span>
                </li>
            </ul>
        </div>
        <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <div class="letter-txt-wrap flex flex-align-center flex-pack-center" v-if="letter_flag">
                <div class="letter-txt">
                    {{letter}}
                </div>
            </div>
        </transition>
    </div>
</template>
<template id="btnPage">
    <div class="fragments">
        <header class="headerY">
            <div class="back-icon"></div>
            <div class="close-window">关闭</div>
            首页
            <div class="header-confirm c-confirm">
                确定
            </div>
        </header>
        <div class="containerY" id="test1" style="overflow-y: auto">
            <div class="btn-wrap">
                <div class="btn btn-green">btn1</div>
                <div class="btn btn-green btn-r">btn2</div>
            </div>
        </div>
    </div>
</template>
<template id="calendar">
    <div class="fragments">
        <div class="month">
            <span class="choose-year">{{ currentYear }}年{{ currentMonth }}月</span>
        </div>
        <div class="c_main">
            <ul class="weekdays">
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
            </ul>
            <ul class="days">
                <li v-for="day in days">
                   <span class="calendar_day" :class="{'today':today_flag(day),'other-month':other_month(day)}">
                       {{day.getDate()}}
                    </span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script src="js/contacts.js"></script>
<script src="js/components.js"></script>
<script src="js/phone.js"></script>
<script>
    vm.$mount('.app');
    vrv.init({
        debug: false
    });
    vrv.ready(function () {
        vrv.jssdk.getAccountInfo({
            success: function (res) {
                userInfo.userName = res.mUserName;
                userInfo.id = parseInt(res.mUserId);
                userInfo.url = res.mPortraitUrl || '';
            }
        });
        vrv.jssdk.getContactList({
            success: function (res) {
                if (res.contacts.length > 0) {
                    res.contacts.forEach(function (e) {
                        var url = e.portraitURL ? e.portraitURL : '';
                        var str1 = getFirstLetter(e.buddyName);
                        contactsArr.push({
                            letter: str1,
                            userName: e.buddyName,
                            userID: parseInt(e.buddyID),
                            userPhotoUrl: url
                        });
                    });
                    store.state.contacts = contactsSort(contactsArr);
                }
            }
        });
        vrv.jssdk.getOrganization({
            orgId: 0,
            success: function (res0) {
                if (res0.organization && res0.organization.length > 0 && res0.organization[0]){
                    vrv.jssdk.getOrganization({
                        orgId: res0.organization[0].orgID,
                        success: function (res) {
                            var arr = [];
                            var arr1 = [];
                            if (res.organization.length > 0) {
                                res.organization.forEach(function (e) {
                                    arr.push({
                                        userName: e.orgName,
                                        userID: e.orgID,
                                    });
                                });
                            }
                            if (res.staff.length > 0) {
                                res.staff.forEach(function (n) {
                                    var url = n.portraitUrl ? n.portraitUrl : '';
                                    arr1.push({
                                        userName: n.staffName,
                                        userID: parseInt(n.staffID),
                                        photoUrl: url
                                    });
                                });
                            }
                            structureTitle.orgID = res0.organization[0].orgID;
                            structureTitle.orgName = res0.organization[0].orgName;
                            structureList = arr;
                            staffList = arr1;
                            store.state.structureTitle[0].orgID = structureTitle.orgID;
                            store.state.structureTitle[0].orgName = structureTitle.orgName;
                            store.state.structureList = arr;
                            store.state.staffList = arr1;
                        }
                    });
                }
            }
        });
        vrv.jssdk.getGroupList({
            success: function (res) {
                var arr = [];
                if (res.groupsInfo.length > 0) {
                    res.groupsInfo.forEach(function (e) {
                        var url = e.groupPortraitURL ? e.groupPortraitURL : '';
                        arr.push({
                            userName: e.groupName,
                            userID: parseInt(e.groupID),
                            photoUrl: url,
                        });
                    });
                    groupList = arr;
                    store.state.groupList = arr;
                }
            }
        });
        vrv.jssdk.showNavigationBar({
            show: false
        })
    });
</script>
</html>